<template>
<div class="table" id="tableHover">
    <el-table
    :data="showData"
    border
    style="width: 100%"   
    :header-cell-style="theader"
    :cell-class-name="tableCellStyle"
    :row-style="tableRowStyle"
    row-key="collegeCode"
    ref="select"
    >
    <el-table-column
      type="index"
      label="序号"
      width="65"
      class="display"
      class-name="allow"
      >
    </el-table-column>
    <el-table-column
      prop="voluntaryNature"
      label="志愿性质"
      min-width="85"
      class-name="allow"
    >
    </el-table-column>
    <el-table-column
      prop="collegeCode"
      label="院校代码"
      min-width="85"
      class-name="allow"
      >
    </el-table-column>
    <el-table-column
      prop="collegeName"
      label="院校名称"
      min-width="115"
      class-name="allow"
      >
      </el-table-column>
    <el-table-column
      prop="professionalGroupCode"
      label="专业代码"
      min-width="85"
      class-name="allow"
      
    >
    </el-table-column>
    <el-table-column
      prop="professionalGroup"
      label="专业名称"
      min-width="100"
      class-name="allow"
     
    >
    </el-table-column>
    <el-table-column
      prop="controlLine"
      label="控制线"
      min-width="72"
      class-name="allow"
      >
    </el-table-column>
    <!-- <el-table-column
      prop="planEnrollment"
      label="计划数"
      min-width="72"
      class-name="allow"
      >
    </el-table-column>
    <el-table-column
      prop="actualEnrollment"
      label="实录"
      min-width="65"
      class-name="allow"
      >
    </el-table-column> -->
    <el-table-column
      prop="minCastScore"
      label="最低投档分数"
      min-width="115"
      class-name="allow"
      >
    </el-table-column>    
    <el-table-column
      prop="minScoreDifference"
      label="最低投档分差"
      min-width="115"
      class-name="allow"
      >
    </el-table-column>    
    <el-table-column
      prop="ranking"
      label="排名"
      min-width="65"
      class-name="allow"
      >
    </el-table-column>    
    <el-table-column
      label="链接" 
      min-width="87"    
      class-name="allow"
    >
        <template slot-scope="scope">
            <a :href="scope.row.introduction" v-show="scope.row.introduction!=null" target="_blank" style="text-decoration:none;color:rgba(51, 170, 255, 1)">链接</a>
        </template>
    </el-table-column>    
    <el-table-column
      type="expand"
      label="专业填写"
      width="105"
    >
      <template slot-scope="slot">
          <div class="expand" >
              <div class="subject" v-for="(item,index) in slot.row.professional" :key="index">
                  <div class="label">专业&nbsp;{{item.professionalNumber}}</div>
                  <div class="input" id="select">
                      <div class="right">
                          <el-input v-model="item.professionalName" placeholder="专业名称"></el-input>
                      </div>
                      <div class="left">
                          <el-input v-model="item.professionalCode" placeholder="专业代码"></el-input>
                      </div>
                  </div>
              </div>
          </div>
      </template>
    </el-table-column>
  </el-table> 
</div>
</template>
<script>
import Sortable from 'sortablejs'
export default {
    props:{
        tableData:Array,
		color: String,
		tableIndex: Number,
    },
    data(){
        return{
            showFlag:false,
            showData:[],
            // color:[
            //   "rgba(243, 145, 7, 0.25)",
            //   "rgba(137, 77, 255, 0.25)",
            //   "rgba(0, 178, 60, 0.25)",
            //   "rgba(255, 84, 51, 0.25)",
            //   "rgba(252, 37, 216, 0.25)",
            //   "rgba(191, 219, 255, 1)",
            // ],
            number:0,
            newExam:false,
            selection:[],
            temselection:[]
        }
    },
    methods:{
        //表头样式
        theader({row, column, rowIndex, columnIndex}){
            return `font-size:0.09rem;font-family:Microsoft YaHei;font-weight: 100;line-height: 23px;color: #FFFFFF;height:0.3rem;padding-left:10px;text-align:center;border-left:none;border-right:none;background-color:${this.color}`
        },
        //元素样式
        tableCellStyle({row,rowIndex}){
          return 'rowstyle'
        },
        //行样式 设置背景色
        tableRowStyle({row,rowIndex}){
            return {'color':'black'}
        },
        //行拖拽
        rowDrop(){
          const tbody = document.querySelector('.el-table__body-wrapper tbody')
          Sortable.create(tbody,{
            dragClass: "dragClass", //设置拖拽样式类名
            ghostClass: "ghostClass", //设置拖拽停靠样式类名
            chosenClass: "chosenClass", //设置选中样式类名
            forceFallback:true,
            fallbackClass:"dragged-item",
            //expand类禁止拖动
            // filter:".expand",
            //允许拖动的类 防止expand扩展出的专业选择框被拖动
            handle:".allow",
            delay:100,
            animation:700,
            onEnd:({newIndex,oldIndex})=>{
              let arr = this.showData
              arr.splice(newIndex,0,arr.splice(oldIndex,1)[0])
              this.$nextTick(()=>{
                this.showData = arr
                // console.log(this.showData);
              })
            }
          })
        },
    },
    watch:{
        showData:{
            deep:true,//深度监听
            handler:function(val,old){
              this.$emit('newData',this.showData);
              // console.log(this.showData);
            }
            
        }
    },
    mounted(){
        console.log(this.tableData)
        this.showData=this.tableData
        this.showFlag=true
        let form=JSON.parse(sessionStorage.form)
        // console.log(form.batch)
        if(form.batch==2){
          this.newExam=true
        }
        // console.log(this.showData);
        // if(this.showData.length>6){
        //   for(let i=0;i<this.showData.length-6;i++){
        //     this.color.push(this.color[i])
        //     // console.log("1");
        //   }
        // }
        // console.log(this.tableData);
        //阻止默认行为
        document.body.ondrop = function(event){
          event.preventDefault(),
          event.stopPropagation()
        }
        this.rowDrop()
    }
}
</script>
<style scoped>
.table{
    width: 100%;
}
.el-table >>>.rowstyle{
    height: 0.3325rem;
    text-align: center;
    font-size: 16px;
    font-family: Source Han Sans;
    font-weight: 100;
    line-height: 27px;
    color:#3A3A3A;
    /* padding-left:8px !important; */
    /* var()函数使用css变量     */
    border-bottom: #33AAFF 1px solid !important;
    border-left: none;
    border-right: none;
}
.expand{
    width: 100%;
    min-height: 200px;
}
.el-table>>>.rowstyle2{
    background-color:#33AAFF;
}
.subject{
    display: inline-block;
    width: 500px;
    height:70px;
    margin-left:60px;
    margin-bottom: 10px;
}
.subject .label{
    height:25px;
    font-size: 16px;
    font-family: Source Han Sans;
    color: #333333;
    text-align: left;
}
.subject .input{
    height: 100%;

}
.subject .right{
    width: 340px;
    float: right;
    height: 100%;
}
.subject .left{
    width: 125px;
    float: left;
    height: 100%;
}
#select>>>.el-input__inner{
    border: 1px solid rgba(51, 170, 255, 1);
}

.el-table>>>.chosenClass{
  /* opacity: 0.8; */
  background: url(../assets/icon.png) #fff no-repeat 12px 13px !important;
  opacity: 1;
  /* transform:translateY(-10px); */
  /* transition-duration: 0.5s; */
}
.el-table>>>.dragged-item {
  display: none;
}
.el-table>>>.display{
  display: none;
}
.indexNum{
  width: 5px;
  
}

</style>